<template>
  <div class="menuLay">
    <slot name="header" />
    <el-menu :default-active="activeIndex" :class="[customMenuClass]" class="rootMenu"
             :mode="menuMode" :collapse="isCollapseRef" :unique-opened="true"
             @select="handleSelect" :ellipsis="false">
      <MenuTree :menus="menus" ref="menuList" />
    </el-menu>
    <slot name="footer" />
    <div class="collapseLay" @click="onCollapse()">
      <el-icon :size="24">
        <Fold v-if="!isCollapseRef"/>
        <Expand v-if="isCollapseRef"/>
      </el-icon>
    </div>
  </div>
</template>
<script setup lang="ts">

import router from "@/router";
import {handleMenus, useStore} from "@/stores";
import MenuTree from "@/views/navs/MenuItem";

const props = defineProps({
  mode: {
    type: String,
    required: false,
  },
  isCollapse: {
    type: Boolean,
    required: false,
    default: false,
  },
  activeIndex: {
    type: String,
    required: false,
    default: '0',
  },
  customMenuClass: {
    type: String,
    required: false,
    default: 'el-menu-class',
  }
});

let menuMode = ref(props.mode);
let menuList = shallowRef(null);
let isCollapseRef = ref(props.isCollapse);
let emits = defineEmits(['onSelect','onCollapse']);

const menus = useStore().menus || [];
handleMenus(menus);

const updateCollapse = (val: boolean) => {
  isCollapseRef.value = val;
}

const handleSelect = (key: string, keyPath: string, menuItem: any) => {
  router.push({
    path: key,
    query: {}
  });
  emits("onSelect",{key, keyPath, menuItem})
}

const onCollapse = () => {
  isCollapseRef.value = !isCollapseRef.value;
  emits('onCollapse', isCollapseRef.value);
}

defineExpose({
  updateCollapse
})

</script>

<style>

.rootMenu {
  flex: 1;
}

.rootMenu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.menuLay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.collapseLay {
  padding: 8px;
  margin-left: 8px;
  cursor: pointer;
}

</style>
